<template>
    <el-container>
                <el-aside width="200px">
            <StElTree :datas="computedUrl.list" @nodeClick="nodeClick" :origin-props="{label: 'deptName'}"></StElTree>
        </el-aside>
        <el-main>
        <StElDynamicForm :helper-form="helperForm" :submit-props="{method: 'get',loading: searchLoading,onSubmit:(form,data)=>{queryParams = $stObjectTools.clone(data)}}"
                         :options="computedFormOptions" :origin-prop="{inline: true,labelWidth: '100px'}">
            <template #buttons>
                <el-button v-bind="$stElStyleTools.aiButtonStyle('添加')"
                           @click="$router.push(computedUrl.router.add)" size="mini">添加
                </el-button>
            </template>
        </StElDynamicForm>
        <StElTable ref="steltable" :options="computedTableOptions" @loading="(val)=>{searchLoading = val}" :datas="computedUrl.searchList" :query-params="queryParams">
            <template #append>
                <el-table-column
                        label="操作"
                        width="200">
                    <template #default="{row,column,$index}">
                        <StElButtonGroup :group-param="{row,column,$index}" :operationMoreButtonOptions="{stype: 'link'}" :operations="tableOperations">
                        </StElButtonGroup>
                    </template>
                </el-table-column>

            </template>
        </StElTable>
        </el-main>
    </el-container>
</template>

<script>
    import DeptTreeMixin from '../DeptTreeMixin.js'

    export default {
        name: "DeptTreeSearchList",
        mixins: [DeptTreeMixin],
        props: {
        },
        computed: {
        },
        data() {
            return {
                queryParams: {},
                searchLoading:  false,

                helperForm: {
                    parentId: ''
                },

                tableOperations: [{
                    label: '删除',
                    stype: 'link',
                    loading: false,
                    requestSuccess: ({groupParam}) => {
                        // 删除当前行，不重新请求
                        this.$refs.steltable.getTableData().splice(groupParam.$index, 1)
                    },
                    action: ({groupParam}) => {
                        return {
                            method: 'delete',
                            url: this.$stStringTools.replaceb(this.computedUrl.delete, {id: groupParam.row.id}),
                            confirmText: `确定删除 ${groupParam.row.name}吗`
                        }
                    }
                },
                    {
                        label: '修改',
                        stype: 'link',
                        action: ({groupParam}) => {
                            this.$router.push({path: this.computedUrl.router.update, query: {id: groupParam.row.id}})
                        }
                    },
                    {
                        label: '添加子级',
                        stype: 'link',
                        action: ({groupParam}) => {
                            this.$router.push({path: this.computedUrl.router.add, query: {parentId: groupParam.row.id}})
                        }
                    },
                ]
            }
        },
        methods: {
            nodeClick(data) {
                this.helperForm.parentId = data.id
            },
        }
    }
</script>

<style scoped>

</style>